<!--  -->
<template>
  <div class="conditionGroup">
    <el-card class="box-card" shadow="never">
      <el-scrollbar max-height="600px">
        <div slot="header" class="cardHeader">
          <!-- <span>{{ list.type == 'AND' ? '与' : '或'}}条件组</span> -->
          <el-dropdown @command="changeCurrGroupType">
          <span class="el-dropdown-link">
            {{ list.type == "AND" ? "与" : "或" }}{{ list.isNot ? "非" : "" }}条件组<el-icon class="ep-icon--right">
              <arrow-down/>
              </el-icon>
          </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="AND">与条件组</el-dropdown-item>
                <!-- <el-dropdown-item command="ANDNOT">与非条件组</el-dropdown-item> -->
                <el-dropdown-item command="OR">或条件组</el-dropdown-item>
                <!-- <el-dropdown-item command="ORNOT">或非条件组</el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="btnBox">
            <!-- <el-button type="text" @click="changeCurrGroupType(list.type)"
              >切换条件组类型</el-button
            > -->
            <el-button link @click="addConditionItem">添加条件</el-button>
            <el-button link @click="addConditionGroup"
            >添加条件组
            </el-button
            >
            <el-button link @click="delCurrGroup(list.privateKey)"
            >删除
            </el-button
            >
          </div>
        </div>
        <div v-for="(item, index) in list.filters" :key="index" class="cardBody">
          <template v-if="item && Object.keys(item).length !== 0">
            <conditionGroup
                v-if="Object.keys(item).includes('filters')"
                v-bind="$props"
                :list="item"
                @on-delete="onDelete"
            ></conditionGroup>
            <div class="condtionBox" v-else>
              <conditionItem v-bind="$props" :item="item"/>
              <i class="iconfont icon-delete" @click="onDelete(item.privateKey)"></i>
            </div>
          </template>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import {deepClone, generateUUID} from "@/utils/util";
import {getFilterItem} from "./utils"
import conditionItem from "./condition-item.vue";
import {ArrowDown} from "@element-plus/icons-vue";

export default {
  name: "ConditionGroup",
  components: {ArrowDown, conditionItem},
  props: {
    // 页面组件选项
    paramsOptions: {
      type: Array,
      default() {
        return [];
      },
    },
    // 数据表dataModel
    fieldDefinitions: {
      type: Object,
      default() {
        return {};
      },
    },
    typeList: {
      type: Array,
      default() {
        return [];
      },
    },
    hasOtherFrom: {
      type: Boolean,
      default: true
    },
    list: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    changeCurrGroupType(type) {
      // if (type == "AND") {
      //   this.list.type = "OR";
      // } else {
      //   this.list.type = "AND";
      // }
      switch (type) {
        case "AND":
          this.list.type = "AND";
          this.list.isNot = false
          break;
        case "OR":
          this.list.type = "OR";
          this.list.isNot = false
          break;
        case "ANDNOT":
          this.list.type = "AND";
          this.list.isNot = true
          break;
        case "ORNOT":
          this.list.type = "OR";
          this.list.isNot = true
          break;

        default:
          break;
      }
    },
    // 添加条件
    addConditionItem() {
      this.list.filters.push(deepClone(getFilterItem()));
    },
    // 添加条件组
    addConditionGroup(type) {
      this.list.filters.push({
        filters: [],
        type: "AND",
        isNot: false,
        privateKey: generateUUID(),
      });
    },
    // 删除当前条件组
    delCurrGroup(privateKey) {
      this.$emit("on-delete", privateKey);
    },
    onDelete(privateKey) {
      console.log({privateKey});
      for (let i = 0; i < this.list.filters.length; i++) {
        console.log(this.list.filters[i].privateKey);
        if (this.list.filters[i].privateKey == privateKey) {
          this.list.filters.splice(i, 1);
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.conditionGroup {
  padding: 8px 0;
  font-size: 16px;

  :deep(.ep-card__header) {
    padding: 16px;
  }

  :deep(.ep-card__body) {
    padding: 16px;
  }

  .cardHeader {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btnBox {
    }
  }

  .condtionBox {
    display: flex;
    align-items: center;

    .iconfont {
      margin-left: 8px;
      cursor: pointer;

      &:hover {
        color: red;
      }

      :deep(.conditionItem) {
        flex: 1;
      }
    }
  }
}
</style>
